<div class="container">

    <?php echo $this->element('page_header'); ?>

    <div class="row">
        <div class="span12">

            <div class="widget">

                <div class="widget-header">
                    <h3>
                        <i class="icon-th-list"></i>
                        Create New Social Security Categories, Modify Existing Social Security Categories, Delete Social Security Categories.
                    </h3>
                </div> <!-- /widget-header -->

                <div class="widget-content">
                    <table id="flex" style="display:none;"></table>
                </div> <!-- /widget-content -->

                <div style="display: none;">
                    <div id="form-window" style="margin: 20px 5px 5px 5px;">
                        <div class="form-prompt" ></div>
                        <div class="widget">

                            <div class="widget-header">
                                <h3>
                                    <i class="icon-th-list"></i>
                                    Social Security Category Form
                                </h3>
                            </div> <!-- /widget-header -->

                            <div class="widget-content">
                                <!--<div id="loginmsg" style="">
                                    <?php /*echo $this->Message->msg('Form Validation Error','','error',true); */?>
                                </div>-->
                                <form action="<?php echo $this->Html->url(array('controller' => 'SocialSecurity', 'action' => 'index/save')); ?>" id="user-form" class="form-horizontal" onsubmit="event.returnValue = false; return false;" method="post" accept-charset="utf-8">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label" for="name">Category Name</label>
                                        <div class="controls">
                                            <input type="text" name="data[SocialSecurityCategory][name]" id="name" class="input" value="" label="Category Name" validate="required" />
                                            <input type="hidden" name="data[SocialSecurityCategory][id]"  value="0"  />
                                        </div>
                                    </div>

                                    <fieldset>
                                        <legend style="font-size: 13px; font-weight: bold; margin-bottom: 5px;">Category Components</legend>
                                        <table id="table-components" class="table table-bordered table-striped table-highlight">
                                            <thead>
                                                <tr>
                                                    <th>Tier</th>
                                                    <th>Default Net Wage</th>
                                                    <th>Value %</th>
                                                    <th>Presentation Value %</th>
                                                </tr>
                                            </thead>
                                            <tbody data-count="1">
                                                <tr data-id='1'>
                                                    <td>
                                                        Tier 1
                                                        <input type="hidden" name="data[SocialSecurity][1][tier]" value="1" />
                                                        <input type="hidden" name="data[SocialSecurity][1][id]"  value="0"  />
                                                    </td>
                                                    <td>
                                                        <input type="radio" name="data[SocialSecurityCategory][start]" value="1" checked="checked" />
                                                    </td>
                                                    <td>
                                                        <input type="text" name="data[SocialSecurity][1][percent_value]" size="3" style="width: 57px;" class="input" value="0" label="Percent Value" validate="required,decimalNumber"/>
                                                    </td>
                                                    <td>
                                                        <input type="text" name="data[SocialSecurity][1][presentation_value]" size="3" style="width: 57px;" class="input" value="0" label="Presentation Value" validate="required,decimalNumber"/>
                                                    </td>
                                                </tr>
                                            </tbody>
                                            <tfoot id="table-footer">
                                                <tr>
                                                    <td colspan="4">
                                                        <div style="text-align: right">
                                                            <button id="add-more-btn" type="button" class="btn btn-primary btn-inverse">Add New Tier</button>
                                                            <button id="delete-component-btn" type="button" class="btn btn-primary btn-inverse"><i class="icon-trash"></i> Delete Tier</button>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>

                                    </fieldset>

                                    <div class="form-actions" style="padding: 10px 0px 10px 120px;">
                                        <button id="save-btn" type="submit" class="btn btn-primary">Save Category</button>
                                        <button id="cancel-btn" class="btn" type="button">Cancel</button>
                                        <!--<input type="hidden" name="" id="user_id" />-->
                                    </div>
                                </fieldset>
                               </form>
                            </div> <!-- /widget-content -->

                        </div> <!-- /widget -->

                    </div>
                </div>

            </div> <!-- /widget -->

        </div>

    </div> <!-- /.row -->

</div> <!-- /.container -->

<!-- URLs -->
<input type="hidden" id="table-url" value="<?php echo $this->Html->url(array('controller' => 'SocialSecurity', 'action' => 'index/get')); ?>" />
<input type="hidden" id="table-editable-url" value="<?php echo $this->Html->url(array('controller' => 'SocialSecurity', 'action' => 'index/save')); ?>" />
<input type="hidden" id="table_delete_url" value="<?php echo $this->Html->url(array('controller' => 'SocialSecurity', 'action' => 'index/delete')); ?>" />


<?php
    echo $this->Html->script('Scripts/social_security.js');
?>